<template>
	<div class="flow-row">
		<div class="flow-box" >
			<div class="flow-item"  :class="{ 'flow-item-active': state.isActive }">
				<div class="flow-node-box" :class="{ 'has-error': node.error }" style="width:200px">
					<div class="node-name node-sp">
            <span v-if="node.funcCode">
              {{node.funcCode}}
            </span>
            <span v-else class="hint-title">请选择需要调用的接口</span>
						<SvgIcon @click="openApiConvert(node)" name="ele-Tools" :size="20" style="margin-left: 10px" />
					</div>
					<div class="node-main" style="width:200px" >
            <zh-search-api :allowClear="false" v-model="state.functionInfo" :labelInValue="true" @change="apiChange"  style="width:100%">
            </zh-search-api>
					</div>
					<!-- 错误提示 -->
					<SvgIcon v-if="node.error" name="ele-WarningFilled" class="node-error" />
					<div  class="close-icon">
						<SvgIcon name="ele-CircleClose" @click="state.deletable = true" />
					</div>
					<!-- <div class="flow-node-toolbar">
            <a-icon type="copy" @click.stop="node.deletable = true" />
          </div> -->
					<!-- 删除提示 -->
					<DeleteConfirm :node="node" v-model="state.deletable" />
				</div>
			</div>
			<!-- 如果子节点是意见分支,则只能添加一个意见分支 -->
			<FlowAddNode :node="node" :nodeType="5"  />
		</div>

    <el-drawer
        v-model="state.convertVisible"
        title="接口转化参数配置"
        direction="ltr"
        size="60%"
    >
      <div style="margin:10px;">
        <lite-flow-convert :targetCode="props.node.funcCode"></lite-flow-convert>
      </div>
    </el-drawer>
	</div>
</template>
<script lang="ts" setup name="ServiceFlowEvent">
import FlowAddNode from '../../add/index.vue';
import DeleteConfirm from '../../common/ServiceDeleteConfirm.vue';
import LiteFlowConvert from '@/views/apiCenter/ApiLiteFlow/component/LiteFlowConvert.vue';

//------------------接收传入参数------------------------
const props = defineProps({
	node: {
		type: Object,
		default: function () {
			return {};
		},
	},

});

const state = reactive({
	isActive: false,
	deletable: false,
  convertVisible:false,
  apiVisible:false,
  functionInfo:{
    label:props.node.funcTitle,
    value:props.node.funcCode,
    key:props.node.funcCode,
  },
  oldFuncCode:"",
});

watch(
	() => props.node,
	() => {
		state.isActive = false;
		state.deletable = false;
	},
	{
		deep: true,
	}
);


function openApiConvert(node){
  state.convertVisible = true;
}

function apiChange(info){
  props.node.funcCode=info.key;
  props.node.funcTitle=info.label;
  $store.serviceFlow.DEL_FUNC(state.oldFuncCode);
  state.oldFuncCode=info.value
  $store.serviceFlow.ADD_FUNC(info.key,info.label);

}
</script>
